<template>
  <div class="container">
    <div class="header">
      <div class="title">闸坝智能调度与安全检测</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/gateDamIndex' })">总体概况</div>
        <div class="item" @click="router.push({ path: '/beijiangIndex' })">北江船闸</div>
        <div class="item active">连江闸坝</div>
      </div>
    </div>
    <div class="main">

      <div class="middle-part">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="filter">
          <el-cascader v-model="shipLock" :options="shipLockOptions" :show-all-levels="false"
            @change="shipLockChange" />
        </div>
        <div class="left-content">
          <div class="bottom-part">
            <div class="base-info">
              <div style="display:flex;margin-top:22px;">
                <div class="line"></div>
                <div class="title">基本信息</div>
              </div>
              <div class="list"  style="display: flex;flex-direction: column; background-color:#fcfcfc; border-radius: 10px;margin: 15px 35px;justify-content: 
              space-around;border: 2px solid #80808014;">
                <div class="info-items">
                  <div class="item width40 " style="position: relative; padding-right: 12px;">
                    <div class="name">船闸名称</div>
                    <div class="value">{{ baseInfoObj.name }}</div>
                    <div style=" position: absolute; right: 24px; top: 0%; bottom: -13%; width: 1px; background: rgb(0 0 0 / 20%); z-index: 1;"></div>
                  </div>
                  <div class="item width40" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">所属航道</div>
                    <div class="value pl18">{{ baseInfoObj.channel }}</div>
                    <div style=" position: absolute; right: 24px; top: 0%; bottom: -14%; width: 1px; background: rgb(0 0 0 / 13%); z-index: 1;"></div>
                  </div>
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">管理单位</div>
                    <div class="value pl18">{{ baseInfoObj.manage }}</div>
                  </div>
                </div>
                <div style="border-top: 2px solid rgba(128, 128, 128, 0.2);margin: 10px 0;"></div>
                <div class="info-items">
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name">船闸等级</div>
                    <div class="value">{{ baseInfoObj.slLevel }}</div>
                    <div style=" position: absolute; right: 24px; top: -13%; bottom: -13%; width: 1px; background: rgb(0 0 0 / 20%); z-index: 1;"></div>
                  </div>
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">当年变形预警情况</div>
                    <div class="value pl18">{{ baseInfoObj.alertSit }}</div>
                    <div style=" position: absolute; right: 24px; top: -14%; bottom: -14%; width: 1px; background: rgb(0 0 0 / 13%); z-index: 1;"></div>
                  </div>
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">安全评定等级</div>
                    <div class="value pl18">{{ baseInfoObj.saveLvl }}</div>
                  </div>
                </div>
                <div style="border-top: 2px solid rgba(128, 128, 128, 0.2); margin: 10px 0;"></div>
                <div class="info-items" >
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name">变形监测周期</div>
                    <div class="value">{{ baseInfoObj.cyc }}</div>
                    <div style=" position: absolute; right: 24px; top: -13%; bottom: -3%; width: 1px; background: rgb(0 0 0 / 20%); z-index: 1;"></div>
                  </div>
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">建成年份</div>
                    <div class="value pl18">{{ baseInfoObj.createYear }}</div>
                    <div style=" position: absolute; right: 24px; top: -13%; bottom: -3%; width: 1px; background: rgb(0 0 0 / 13%); z-index: 1;"></div>
                  </div>
                  <div class="item" style="position: relative; padding-right: 12px;">
                    <div class="name pl18">已使用年限</div>
                    <div class="value pl18">{{ baseInfoObj.useYear }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="video">
              <!-- <div class="title">视频监控</div> -->
              <div class="subtitle">
                <div style="margin-top: 9px;">
                  <div class="line"></div>
                  <div class="name">实时视频监控</div>
                </div>
                <el-select v-model="videoPoint" size="small" :disabled="videoDirectoryData.length?false:true"
                  @change="videoPointChange" placeholder="请选择视频点" style="width: 169px;    margin-left: 583px;margin-top: -32px;">
                  <el-option v-for="item in videoDirectoryData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </div>
              <div class="play-video" v-show="videoDirectoryData.length">
                <video id="myVideo1" class="video-js vjs-default-skin vjs-big-play-centered"
                  style="object-fit: fill;width: 100%;height: 100%;">
                </video>
              </div>
              <div class="no-video" v-show="videoDirectoryData.length === 0">
                <img src="../../assets/images/pc/error.png" alt="">
                <div class="name">暂无视频</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="sub">
          <div class="title">变形监测分析</div>
          <div class="subtitle">
            <div>
              <div class="line"></div>
              <div class="name">监测点数据分析</div>
            </div>
          </div>
          <div class="count">
            <div style="display: flex;  background-color:#fcfcfc; border-radius: 10px;border: 2px solid #80808014;height: 131px;margin-left: 10px;">
              <div class="first-item">
                <div class="name">
                  <!-- <img src="../../assets/images/pc/monocycle-icon.png" alt=""> -->
                  <div>上月水坝单周期最大变形量</div>
                </div>
                <div class="name">
                  <!-- <img src="../../assets/images/pc/accumulate-icon.png" alt=""> -->
                  <div>上月水坝累计变形量</div>
                </div>
              </div>
              <div class="second-item">
                <div class="item">
                  <div class="name">平面(mm)</div>
                  <div class="value">{{ defInfoData && defInfoData.plane? defInfoData.plane : '--' }}</div>
                </div>
                <div class="item">
                  <div class="name">高程(mm)</div>
                  <div class="value">{{ defInfoData && defInfoData.elevation? defInfoData.elevation : '--' }}</div>
                </div>
                <div class="item">
                  <div class="name">水平方向(mm)</div>
                  <div class="value">{{ defInfoData && defInfoData.lastMonthpm? `＜${defInfoData.lastMonthpm}` : "--" }}
                  </div>
                </div>
                <div class="item">
                  <div class="name">垂直方向(mm)</div>
                  <div class="value">{{ defInfoData && defInfoData.lastMonthgc? `＜${defInfoData.lastMonthgc}` : "--" }}
                  </div>
                </div>
              </div>
            </div>

            <div class="third-item">
              <div class="item">
                <!-- <img src="../../assets/images/pc/quantity-one-icon.png" alt=""> -->
                <div class="quantity">
                  <div class="name">水坝变形监测点数量(个)</div>
                  <div class="value">{{ defInfoData && defInfoData.pointNum? defInfoData.pointNum : '--' }}</div>
                </div>
              </div>
              <div class="item">
                <!-- <img src="../../assets/images/pc/quantity-two-icon.png" alt=""> -->
                <div class="quantity">
                  <div class="name">水坝测站布置情况</div>
                  <div class="value">{{ defInfoData && defInfoData.arrangeSit || '--' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sub1">
          <div class="subtitle1">
            <div style="margin-top:-80px">
              <div class="line"></div>
              <div class="name">变形监测统计</div>
            </div>
            <div class="btn-group">
              <div class="btn" :class="currentActive === 1? 'active' : ''" @click="currentActiveChange(1)">多点单周期图</div>
              <div class="btn" :class="currentActive === 2? 'active' : ''" @click="currentActiveChange(2)">单点多周期图</div>
            </div>
          </div>
          <div class="select-condition">
            <template v-if="currentActive === 1">
              <el-input v-model="cycle1" disabled style="width: 100px;margin-right: 10px;" />
              <el-select v-model="cycle" @change="cycleChange" placeholder="选择周期" style="width: 100px;">
                <el-option v-for="item in cycleOptions" :key="item.cycName" :label="item.cycName"
                  :value="item.cycName" />
              </el-select>
              <div class="condition-btn">
                <div class="btn" :class="currentType1 === '本次'? 'active' : ''" @click="changeType1('本次')">本次</div>
                <div class="btn" :class="currentType1 === '累积'? 'active' : ''" @click="changeType1('累积')">累积</div>
              </div>
            </template>
            <template v-if="currentActive === 2">
              <el-select v-model="pointName" placeholder="请选择点" @change="singleValueChange"
                style="width: 100px;margin-right: 10px;">
                <el-option v-for="item in pointNameData" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
              <el-select v-model="singleType" placeholder="请选择类型" @change="singleValueChange"
                style="width: 80px;margin-right: 10px;">
                <el-option v-for="item in singleTypeData" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
              <el-select v-model="singleValue1" placeholder="选择周期" v-if="singleType === '周期'"
                @change="singleValueChange" style="width: 100px;margin-right: 10px;">
                <el-option v-for="item in cycleOptions" :key="item.cycName" :label="item.cycName"
                  :value="item.cycName" />
              </el-select>
              <el-select v-model="singleValue2" placeholder="选择周期" v-if="singleType === '周期'"
                @change="singleValueChange" style="width: 100px;">
                <el-option v-for="item in cycleOptions" :key="item.cycName" :label="item.cycName"
                  :value="item.cycName" />
              </el-select>
              <el-date-picker v-model="singleTime" type="daterange" :clearable="false" value-format="YYYY-MM-DD"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="singleValueChange"
                style="width: 180px;" v-if="singleType === '时间'" />
              <div class="condition-btn">
                <div class="btn" :class="currentType2 === '本次'? 'active' : ''" @click="changeType2('本次')">本次</div>
                <div class="btn" :class="currentType2 === '累积'? 'active' : ''" @click="changeType2('累积')">累积</div>
              </div>
            </template>
          </div>
          <div id="first-chart"></div>
        </div>
        <div class="sub2">
          <div class="subtitle">
            <div>
              <div class="line"></div>
              <div class="name">变形监测观测周期统计</div>
            </div>
          </div>
          <div id="second-chart"></div>
        </div>
        <div class="sub3">
          <div class="subtitle">
            <div class="name2">
              <div style="display:flex;margin-top: 1px;white-space: nowrap;">
                  <div class="line1"></div>
              <div>闸坝情况记录</div>
              </div>
            
              <div class="record-name" v-if="isShowRecord">
                <img src="../../assets/images/pc/arrow-icon.png" alt="">
                <div>{{ recordName }}</div>
              </div>
            </div>
            <div class="back" @click="backFn" v-if="isShowRecord">
              <img src="../../assets/images/pc/back-icon.png" alt="">
              <div>返回</div>
            </div>
          </div>
          <div class="record">
            <template v-if="!isShowRecord">
              <div class="item" @click="ElMessage.warning('暂无数据')">
                <img src="../../assets/images/pc/record-one.png" alt="">
                <div>日常维护记录</div>
              </div>
              <div class="item" @click="ElMessage.warning('暂无数据')">
                <img src="../../assets/images/pc/record-two.png" alt="">
                <div>船闸操作记录</div>
              </div>
              <div class="item" @click="recordDetails('安全检查')">
                <img src="../../assets/images/pc/record-three.png" alt="">
                <div>安全检查</div>
              </div>
              <div class="item" @click="ElMessage.warning('暂无数据')">
                <img src="../../assets/images/pc/record-four.png" alt="">
                <div>隐患跟踪处理</div>
              </div>
              <div class="item" @click="recordDetails('除险加固记录')">
                <img src="../../assets/images/pc/record-five.png" alt="">
                <div>除险加固记录</div>
              </div>
            </template>
            <template v-if="recordName === '安全检查'">
              <div class="info">
                <div class="info-item" style="border-right: 1px solid #F0F0F0;">
                  <div class="name">检查频次数</div>
                  <div class="value">{{ addStrongObj.inspectTimes }}</div>
                </div>
                <div class="info-item" style="border-right: 1px solid #F0F0F0;padding-left: 20px;">
                  <div class="name">检查落实数</div>
                  <div class="value">{{ addStrongObj.inspectPraTimes }}</div>
                </div>
                <div class="info-item" style="padding-left: 20px;">
                  <div class="name">闸坝问题数</div>
                  <div class="value">{{ addStrongObj.damIssues }}</div>
                </div>
              </div>
            </template>
            <template v-if="recordName === '除险加固记录'">
              <div class="info">
                <div class="info-item" style="border-right: 1px solid #F0F0F0;">
                  <div class="name">风险预警数</div>
                  <div class="value">{{ addStrongObj.alarmNum }}</div>
                </div>
                <div class="info-item" style="border-right: 1px solid #F0F0F0;padding-left: 20px;">
                  <div class="name">加固次数</div>
                  <div class="value">{{ addStrongObj.strongTimes }}</div>
                </div>
                <div class="info-item" style="padding-left: 20px;">
                  <div class="name">风险消除数</div>
                  <div class="value">{{ addStrongObj.disAlert }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { ElMessage } from 'element-plus';
//引入echarts
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

//引入videojs
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
videojs.addLanguage('zh-CN', VideojsZhcnLanguage);

// 引入api
import {
  getShipLockSmall, //获取船闸
  baseInfo, //基本信息
  videoDirectory, //获取视频点
  geVideotUrl, //获取视频URL
  defInfo, //监测点数据分析
  getCycList, //获取周期
  defAyls, //多点单周期图
  defSingleAyls, //单点多周期图
  cycleStatis, //变形监测观测周期统计
  addStrong, //闸坝情况记录
} from '@/bridge-h5/utils/myapi';

//地图
import OlArc from './olArcDetailsLianjiang.vue';
const OlArcRef = ref(null);

//获取船闸
const shipLock = ref([]);
const shipLockOptions = ref([]);
const getShipLockFn = () => {
  getShipLockSmall("连江").then((res) => {
    if (res.code === 200) {
      let data = [
        { label: "船闸", value: "船闸", children: [] },
        { label: "水坝", value: "水坝", children: [] }
      ];
      res.data.cz.forEach((item) => {
        data[0].children.push({
          label: item.name,
          value: item.name
        });
      });
      res.data.sb.forEach((item) => {
        data[1].children.push({
          label: item.name,
          value: item.name
        });
      });
      shipLockOptions.value = data;
      shipLock.value = [shipLockOptions.value[0].value, shipLockOptions.value[0].children[0].value];

      baseInfoFn();
      initVideo();
      defInfoFn();
      getCycListFn();
      cycleStatisFn();
      addStrongFn();
    }
  });
};
const shipLockChange = () => {
  OlArcRef.value.getPositionFn(shipLock.value[1]);
  baseInfoFn();
  videoDirectoryFn();
  defInfoFn();
  getCycListFn();
  cycleStatisFn();
  addStrongFn();
};
//基本信息
const baseInfoObj = ref({});
const baseInfoFn = () => {
  baseInfo(shipLock.value[1]).then((res) => {
    if (res.code === 200 && res.data) {
      baseInfoObj.value = res.data;
    }
  });
};
//视频监控
const initVideo = () => {
  nextTick(() => {
    videojs("myVideo1", {
      language: 'zh-CN',  //汉化
      autoplay: true, // true,浏览器准备好时开始播放
      loop: true, // 导致视频一结束就重新开始
      controls: true, //取消视频中的进度条
      muted: true, //是否静音
      preload: 'metadata', //auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
      textTrackDisplay: false,
      techOrder: ['html5', 'flash'],
      controlBar: {
        fullscreenToggle: false, //禁用全屏
      }
    });
  });
  videoDirectoryFn();
};
const videoPoint = ref('');
const videoDirectoryData = ref([]);
const videoDirectoryFn = () => {
  videoDirectory(shipLock.value[1]).then((res) => {
    if (res.code === 200 && res.data.length) {
      videoDirectoryData.value = res.data;
      videoPoint.value = res.data[0].id;
      geVideotUrlFn();
    } else {
      videoDirectoryData.value = [];
      videoPoint.value = "";
    }
  });
};
const geVideotUrlFn = () => {
  geVideotUrl(videoPoint.value).then((res) => {
    if (res.code === 200 && res.data) {
      const myPlayer = videojs("myVideo1");
      myPlayer.src([
        {
          type: 'application/x-mpegURL',
          src: res.data.url, //视频播放地址
        }
      ]);
      myPlayer.play();
    }
  });
};
const videoPointChange = () => {
  geVideotUrlFn();
};
//监测点数据分析
const defInfoData = ref({});
const defInfoFn = () => {
  defInfo(shipLock.value[1]).then((res) => {
    if (res.code === 200) {
      defInfoData.value = res.data;
    }
  });
};
//变形监测统计
const currentActive = ref(1);
const currentActiveChange = (val) => {
  currentActive.value = val;
  singleType.value = "周期";
  if (val === 1) {
    defAylsFn();
  } else {
    defSingleAylsFn();
  }
};
const cycle = ref('');
const cycle1 = ref('周期');
const singleType = ref('周期');
const singleTypeData = [
  { text: '周期', value: '周期' },
  { text: '时间', value: '时间' },
];
const singleValue1 = ref('');
const singleValue2 = ref('');
const singleTime = ref([new Date().format("yyyy-MM-dd"), new Date().format("yyyy-MM-dd")]);
const cycleOptions = ref([]);
const currentType1 = ref("累积");
const changeType1 = (val) => {
  currentType1.value = val;
  defAylsFn();
};
const currentType2 = ref("累积");
const changeType2 = (val) => {
  currentType2.value = val;
  defSingleAylsFn();
};
const cycleChange = () => {
  defAylsFn();
};
const singleValueChange = () => {
  defSingleAylsFn();
};
const getCycListFn = () => {
  getCycList(shipLock.value[1]).then((res) => {
    if (res.code === 200) {
      res.data.forEach((item) => {
        item.cycName = `第${item.cyc}周期`;
      });
      cycleOptions.value = res.data;
      if (res.data.length) {
        cycle.value = res.data[0].cycName;
        singleValue1.value = res.data[3].cycName;
        singleValue2.value = res.data[0].cycName;
      } else {
        cycle.value = "";
        singleValue1.value = "";
        singleValue2.value = "";
      }
      defAylsFn();
    }
  });
};
const pointName = ref('');
const pointNameData = ref([]);
const aylsXAxisData = ref([]);
const aylsSeriesData = ref([]);
const legendData = ref({});
const defAylsFn = () => {
  defAyls(shipLock.value[1], cycle.value.replace('第', '').replace('周期', '')).then((res) => {
    if (res.code === 200) {
      if (res.data.length) {
        let nData = [];
        let eData = [];
        let zData = [];
        let yujing1 = [];
        let yujing2 = [];

        let thisnData = [];
        let thiseData = [];
        let thiszData = [];
        pointNameData.value = [];
        aylsXAxisData.value = [];
        res.data.forEach((item) => {
          pointNameData.value.push(
            { text: item.pointName, value: item.pointName }
          );
          aylsXAxisData.value.push(item.pointName);
          nData.push(item.acDn);
          eData.push(item.acDe);
          zData.push(item.acDz);
          yujing1.push(30);
          yujing2.push(-30);
          thisnData.push(item.thisDn);
          thiseData.push(item.thisDe);
          thiszData.push(item.thisDz);
        });
        pointName.value = pointNameData.value[0].value;
        if (currentType1.value === "累积") {
          aylsSeriesData.value = [
            {
              name: '累积变化量N',
              type: 'line',
              //smooth: true,
              data: nData,
              lineStyle: {
                color: '#0051FF',
              },
            },
            {
              name: '累积变化量E',
              type: 'line',
              //smooth: true,
              data: eData,
              lineStyle: {
                color: '#66D88A',
              },
            },
            {
              name: '累积变化量Z',
              type: 'line',
              //smooth: true,
              data: zData,
              lineStyle: {
                color: '#FFB900',
              },
            },
            {
              name: '预警值',
              type: 'line',
              data: yujing1,
              showSymbol: false,
              lineStyle: {
                color: '#F13939',
                width: 1,
                type: 'dashed'
              },
            },
            {
              name: '预警值',
              type: 'line',
              data: yujing2,
              showSymbol: false,
              lineStyle: {
                color: '#F13939',
                width: 1,
                type: 'dashed'
              },
            }
          ];
          legendData.value = {
            data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
          };
        } else if (currentType1.value === "本次") {
          aylsSeriesData.value = [
            {
              name: '本次变化量N',
              type: 'line',
              //smooth: true,
              data: thisnData,
              lineStyle: {
                color: '#0051FF',
              },
            },
            {
              name: '本次变化量E',
              type: 'line',
              //smooth: true,
              data: thiseData,
              lineStyle: {
                color: '#66D88A',
              },
            },
            {
              name: '本次变化量Z',
              type: 'line',
              //smooth: true,
              data: thiszData,
              lineStyle: {
                color: '#FFB900',
              },
            }
          ];
          legendData.value = {
            data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
          };
        }

        initFirstChart();
      } else {
        pointNameData.value = [];
        pointName.value = "";

        aylsXAxisData.value = [];
        aylsSeriesData.value = [];
        initFirstChart();
      }
    }
  });
};
const defSingleAylsFn = () => {
  defSingleAyls(
    singleType.value === '周期' ? singleValue1.value.replace('第', '').replace('周期', '') : singleTime.value[0],
    singleType.value === '周期' ? singleValue2.value.replace('第', '').replace('周期', '') : singleTime.value[1],
    singleType.value === '周期' ? 1 : 2,
    pointName.value,
    shipLock.value[1]
  ).then((res) => {
    if (res.code === 200) {
      let nData = [];
      let eData = [];
      let zData = [];
      let yujing1 = [];
      let yujing2 = [];

      let thisnData = [];
      let thiseData = [];
      let thiszData = [];
      aylsXAxisData.value = [];
      res.data.forEach((item) => {
        if (singleType.value === 2) {
          aylsXAxisData.value.push(item.createTime);
        } else {
          aylsXAxisData.value.push(item.cyc);
        }

        nData.push(item.acDn);
        eData.push(item.acDe);
        zData.push(item.acDz);
        yujing1.push(30);
        yujing2.push(-30);
        thisnData.push(item.thisDn);
        thiseData.push(item.thisDe);
        thiszData.push(item.thisDz);
      });

      if (currentType2.value === "累积") {
        aylsSeriesData.value = [
          {
            name: '累积变化量N',
            type: 'line',
            //smooth: true,
            data: nData,
            lineStyle: {
              color: '#0051FF',
            },
          },
          {
            name: '累积变化量E',
            type: 'line',
            //smooth: true,
            data: eData,
            lineStyle: {
              color: '#66D88A',
            },
          },
          {
            name: '累积变化量Z',
            type: 'line',
            //smooth: true,
            data: zData,
            lineStyle: {
              color: '#FFB900',
            },
          },
          {
            name: '预警值',
            type: 'line',
            data: yujing1,
            showSymbol: false,
            lineStyle: {
              color: '#F13939',
              width: 1,
              type: 'dashed'
            },
          },
          {
            name: '预警值',
            type: 'line',
            data: yujing2,
            showSymbol: false,
            lineStyle: {
              color: '#F13939',
              width: 1,
              type: 'dashed'
            },
          }
        ];
        legendData.value = {
          data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
        };
      } else if (currentType2.value === "本次") {
        aylsSeriesData.value = [
          {
            name: '本次变化量N',
            type: 'line',
            //smooth: true,
            data: thisnData,
            lineStyle: {
              color: '#0051FF',
            },
          },
          {
            name: '本次变化量E',
            type: 'line',
            //smooth: true,
            data: thiseData,
            lineStyle: {
              color: '#66D88A',
            },
          },
          {
            name: '本次变化量Z',
            type: 'line',
            //smooth: true,
            data: thiszData,
            lineStyle: {
              color: '#FFB900',
            },
          }
        ];
        legendData.value = {
          data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
        };
      }
      initFirstChart();
    }
  });
};
const initFirstChart = () => {
  nextTick(() => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById('first-chart'));
    let option;
    option = {
      grid: {
        top: '25%',
        left: '40px',
        right: '15px',
        bottom: '40px',
      },
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内

        formatter: function (params) {
          let template = `<b>${params[0].axisValue}</b><br>`;
          for (let i = 0; i < 3; i++) {
            let item = params[i];
            template += item.marker + item.seriesName + ': ' + `<b style="float:right;padding-left: 20px;">${item.data}mm</b><br>`
          }
          return template
        },
      },
      legend: legendData.value,
      xAxis: {
        type: 'category',
        data: aylsXAxisData.value,
        axisLabel: {
          interval: 0,
        },
        axisLine: {
          onZero: true // 将X轴在Y轴0刻度的位置固定
        }
      },
      yAxis: {
        type: 'value',
        name: '单位：mm',
        axisLabel: {
          interval: 0,
        },
        splitLine: {
          show: true,
        }
      },
      series: aylsSeriesData.value
    };

    option && lineChart.setOption(option);
  });
};
//变形监测观测周期统计
const cycleStatisxAxisData = ref([]);
const cycleStatisseriesData = ref([]);
const cycleStatisFn = () => {
  cycleStatis(shipLock.value[1]).then((res) => {
    cycleStatisxAxisData.value = [];
    cycleStatisseriesData.value = [];
    if (res.code === 200) {
      nextTick(() => {
        res.data.forEach((item) => {
          cycleStatisxAxisData.value.push(item.time);
          cycleStatisseriesData.value.push(item.cyc);
        });

        let barChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
        if (barChart == null) {
          barChart = echarts.init(document.getElementById("second-chart"));
        }
        let option;
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true, //限制在图表区域内
            formatter: function (params) {
              let value = params[0].value + '次';
              return params[0].seriesName + '<br/>' + params[0].name + ' : ' + value;
            }
          },
          grid: {
            top: "15%",
            left: "8%",
            right: "10%",
            bottom: "5%",
            containLabel: true,
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              startValue: 0,
              endValue: 7,
              zoomLock: false,
            },
          ],
          xAxis: [
            {
              type: "category",
              data: cycleStatisxAxisData.value,
              name: "时间",
              axisLabel: {
                interval: 0,
                rotate: 45,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: '统计次数：次',
            },
          ],
          series: [
            {
              name: "统计次数",
              data: cycleStatisseriesData.value,
              type: "bar",
              barWidth: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(0, 81, 255, 1)" }, // 顶部
                  { offset: 1, color: "rgba(0, 81, 255, 0.2)" }, // 底部
                ]),
              },
            },
          ],
        };

        option && barChart.setOption(option);
      });
    }
  });
};
//闸坝情况记录
const addStrongObj = ref({});
const addStrongFn = () => {
  addStrong(shipLock.value[1]).then((res) => {
    if (res.code === 200) {
      addStrongObj.value = res.data;
    }
  });
};
const isShowRecord = ref(false);
const recordName = ref("");
const recordDetails = (val) => {
  recordName.value = val;
  isShowRecord.value = true;
};
const backFn = () => {
  recordName.value = "";
  isShowRecord.value = false;
};

onMounted(() => {
  document.title = "闸坝智能调度与安全检测";
  getShipLockFn();
});
onUnmounted(() => {
  setTimeout(() => {
    const myPlayer = videojs("myVideo1");
    if (myPlayer) {
      myPlayer.dispose();
    }
  }, 1000);
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../../assets/fonts/din.ttf");
}
@font-face {
  font-family: Tx;
  src: url("../../assets/fonts/tx.ttf");
}
.container {
  width: 1920px;
  height: 1080px;
  box-sizing: content-box;
  .header {
    height: 40px;
    width: 2500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(204, 213, 232, 0.3);
    border-radius: 57px;
    // background-color:#d0e7fe;
    background: linear-gradient(to right, #d0e7fe, #d0e7fe3b);
    margin: 16px 16px 0px 16px;
    padding: 0 16px;
    .title {
      // font-family: "Tx";
      font-weight: bold;
      font-weight: 1000 !important;
      font-size: 21px;
      color: rgba(105, 161, 247, 255);
    }
    .menu {
      display: flex;
      align-items: center;
      .item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        padding: 6px 18px;
        border-radius: 4px;
      }
      .active {
        color: #ffffff;
        background: #0051ff;
      }
    }
  }
  .main {
    box-sizing: content-box;
    height: 1024px;
    margin: 16px;
    display: flex;
    .left-content {
      width: 1604px;
      height: 496px;
      box-sizing: content-box;
      margin-right: 16px;

      .top-part {
        height: 651px;
        margin-bottom: 16px;
        position: relative;
        .filter {
          position: absolute;
          top: 16px;
          left: 16px;
        }
      }
      .bottom-part {
        width: 1684px;
        height: 496px;
        margin-top: -456px;
        box-sizing: content-box;
        display: flex;
        .base-info {
          width: 991px;
          height: 358px;
          margin-top: 92px;
          margin-right: 16px;
          margin-bottom: 10px;
          background: #f7fbff;
          border-width: 2px;
          border-style: solid;
          border-color: #7db9e469;
          .title {
            font-weight: 500;
            color: #3f91f0;
            font-size: 17px;
            font-weight: bold;
            margin-left: 4px;
          }
          .line {
            width: 4px;
            height: 20px;
            margin-left: 10px;
            background-color: #318bf2;
          }
          .list {
            margin: 26px 40px;
            .info-items {
              display: flex;
              .item {
                width: 33.33%;
                margin-left: 58px;
                .name {
                  font-weight: 400;
                  font-size: 16px;
                  color: #595959;
                  margin-bottom: 4px;
                  font-weight: bold;
                }
                .value {
                  font-weight: 800;
                  font-size: 20px;
                  color: #262626;
                  margin-bottom: 20px;
                }
                .pl18 {
                  padding-left: 18px;
                }
                .pt18 {
                  margin-top: 18px;
                }
              }
            }
          }
        }
        .video {
          height: 358px;
          margin-top: 92px;
          width: 805px;
          margin-right: -136px;
          background: #f7fbff;
          border-width: 2px;
          border-style: solid;
          border-color: #7db9e469;
          .title {
            height: 48px;
            background: linear-gradient(
              90deg,
              rgba(215, 227, 255, 0.4) 0%,
              #d7e3ff 100%
            );
            font-weight: 500;
            font-size: 18px;
            color: #262626;
            line-height: 48px;
            padding-left: 16px;
          }
          .subtitle {
            height: 48px;
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid #f0f0f0;
            .name {
              font-weight: 500;
              font-size: 16px;
              color: #3f91f0;
              font-size: 17px;
              font-weight: bold;
              margin-right: 278px;
              margin-left: 6px;
              margin-top: -21px;
            }
            .line {
              width: 4px;
              height: 20px;
              margin-left: -5px;
              background-color: #318bf2;
            }
          }
          .play-video {
            height: 270px;
            width: 450px;
            margin: 2px 147px 22px 143px;
          }
          .no-video {
            height: 205px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .name {
              font-weight: 500;
              font-size: 16px;
              color: #262626;
              margin-top: 8px;
            }
          }
        }
      }
    }
    .right-content {
      width: 700px;
      height: 1026px;
      box-sizing: content-box;
      background: #ffffff;
      .sub {
        border-style: solid;
        border-color: #7db9e469;
        background-color: #f6fcfc;
        margin-bottom: 10px;
        height: 244px;
        width: 700px;
      }
      .sub1 {
        border-style: solid;
        border-color: #7db9e469;
        background-color: #f6fcfc;
        margin-bottom: 10px;
        height: 331px;
        width: 700px;
      }
      .sub2 {
        border-style: solid;
        border-color: #7db9e469;
        background-color: #f6fcfc;
        margin-bottom: 10px;
        height: 353px;
        width: 700px;
      }
      .sub3 {
        border-style: solid;
        border-color: #7db9e469;
        background-color: #f6fcfc;
        margin-bottom: 10px;
        width: 700px;
        height:200px
      }
      .line1 {
        width: 4px;
        height: 20px;
        margin-left: -5px;
        background-color: #318bf2;
        position: absolute;
        margin-top: 2px;
        margin-left: -11px;
      }
      .title {
        height: 48px;
        background: linear-gradient(
          90deg,
          rgba(215, 227, 255, 0.4) 0%,
          #d7e3ff 100%
        );
        font-weight: 500;
        font-size: 18px;
        color: #262626;
        line-height: 48px;
        padding-left: 16px;
      }

      .subtitle {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid #f0f0f0;
        .line {
          width: 4px;
          height: 20px;
          background-color: #318bf2;
          margin-right: 18px;
          position: absolute;
          margin-top: -23px;
        }
        .name {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          margin-top: -24px;
          margin-left: 11px;
          .record-name {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0051ff;
            padding-left: 4px;
            img {
              width: 8px;
              height: 12px;
              padding-right: 4px;
            }
          }
        }
        .name1 {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          .record-name {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0051ff;
            padding-left: 4px;
            img {
              width: 8px;
              height: 12px;
              padding-right: 4px;
            }
          }
        }
        .name2 {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          margin-top: -22px;
          margin-left: 12px;
          position: absolute;
          .record-name {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0051ff;
            padding-left: 4px;
            img {
              width: 8px;
              height: 12px;
              padding-right: 4px;
            }
          }
        }
        .btn-group {
          display: flex;
          justify-content: center;
          .btn {
            padding: 5px 16px;
            font-weight: 400;
            font-size: 14px;
            color: #262626;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
          }
          .active {
            color: #0051ff;
            border: 1px solid #0051ff;
          }
        }
        .back {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #0051ff;
          padding: 5px 16px;
          border-radius: 4px;
          border: 1px solid #0051ff;
          img {
            width: 20px;
            height: 14px;
          }
        }
      }
      .subtitle1 {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        border-bottom: 1px solid #f0f0f0;
        margin-top: 41px;
        .line {
          width: 4px;
          height: 20px;
          background-color: #318bf2;
          margin-right: 18px;
          position: absolute;
          margin-top: -23px;
        }
        .name {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          margin-top: -24px;
          margin-left: 11px;
          .record-name {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0051ff;
            padding-left: 4px;
            img {
              width: 8px;
              height: 12px;
              padding-right: 4px;
            }
          }
        }
        .name1 {
          font-weight: 500;
          color: #3f91f0;
          font-size: 17px;
          font-weight: bold;
          .record-name {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #0051ff;
            padding-left: 4px;
            img {
              width: 8px;
              height: 12px;
              padding-right: 4px;
            }
          }
        }
        .btn-group {
          display: flex;
          justify-content: center;
          margin-top: -78px;
          .btn {
            padding: 5px 16px;
            font-weight: 400;
            font-size: 14px;
            color: #262626;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
          }
          .active {
            color: #0051ff;
            border: 1px solid #0051ff;
          }
        }
        .back {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #0051ff;
          padding: 5px 16px;
          border-radius: 4px;
          border: 1px solid #0051ff;
          img {
            width: 20px;
            height: 14px;
          }
        }
      }
      .count {
        display: flex;
        height: 72px;
        box-sizing: content-box;
        .first-item {
          width: 33.33%;
          height: 100px;
          margin: 0 12px;
          justify-content: space-around;
          .name {
            height: 36px;
            display: flex;
            white-space: nowrap;
            align-items: center;
            margin-top: 11px;
            font-weight: 400;
            font-size: 15px;
            color: #595959;
            margin-bottom: 4px;
            img {
              width: 14px;
              height: 14px;
              padding-right: 3px;
            }
          }
        }
        .second-item {
          width: 38.33%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 8px !important;
          margin-left: 65px !important;
          border-right: 1px solid #f0f0f0;
          height: 100px;
          margin: 0 12px;
          justify-content: space-around;
          .item {
            width: 50%;
            .name {
              font-weight: 400;
              font-size: 15px;
              color: #595959;
              margin-bottom: 4px;
            }
            .value {
              font-family: "Din";
              margin-left: 10px;
              font-weight: bold;
              font-size: 20px;
              color: #262626;
            }
          }
        }
        .third-item {
          width: 47.33%;
          margin: 8px 0px 0px 20px;
          height: 131px;
          background-color: #fcfcfc;
          border-radius: 10px;
          margin: 0 12px;
          justify-content: space-between;
          border: 2px solid rgba(128, 128, 128, 0.0784313725);
          .item {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              padding-right: 8px;
            }
            .quantity {
              .name {
                font-weight: 400;
                font-size: 15px;
                color: #595959;
                margin-bottom: 4px;
                margin-top: 12px;
                margin-left: 16px;
                // font-weight: bold;
              }
              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 20px;
                color: #262626;
                margin-left: 59px;
              }
            }
          }
        }
      }
      .select-condition {
        display: flex;
        justify-content: center;
        margin: 8px 0;
        margin-top: -42px;
      }
      .condition-btn {
        display: flex;
        margin-left: 16px;
        .btn {
          padding: 5px 16px;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
        }
        .active {
          color: #0051ff;
          border: 1px solid #0051ff;
        }
      }
      #first-chart{
        height: 257px;
      }
      #second-chart {
        height: 296px;
      }
      .record {
        display: flex;
        margin: -13px 16px 37px 16px;
        .item {
          width: 20%;
          text-align: center;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
          border-radius: 8px;
          border: 1px solid #f0f0f0;
          padding: 12px 0px 8px 0px;
          margin-right: 9px;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .info {
          display: flex;
          width: 100%;
          margin: 40px;
          .info-item {
            width: 33.33%;
            .name {
              font-weight: 400;
              font-size: 12px;
              color: #595959;
            }
            .value {
              font-family: "Din";
              font-weight: bold;
              font-size: 20px;
              color: #262626;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
.middle-part {
  width: 2000px;
  height: 1178px;
  margin-right: 11px;
  margin-left: -6px;
  box-sizing: content-box;
  background: #ffffff;
  .filter {
    position: absolute;
    top: 100px;
    left: 30px;
  }
}
</style>